<template>
  <div class="page-scan-mana">
    <el-form :inline="true" :model="dataQueryForm" ref="dataQueryForm">
      <div class="pc-page-header">
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.userNo" clearable class="pc-input3-col5" placeholder="输入用户编号"></el-input>
        </el-form-item>
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.contactName" clearable class="pc-input3-col5"
                    placeholder="输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.contactMobileNo" clearable class="pc-input3-col5"
                    placeholder="输入手机号码"></el-input>
        </el-form-item>
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.companyName" clearable class="pc-input3-col5"
                    placeholder="输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('dataQueryForm')">刷新</el-button>
          <el-button type="primary" @click="viewhistoryFn()">查看历史</el-button>
        </el-form-item>
      </div>
    </el-form>
    <egrid border class="page-list"
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           @selection-change="selectionChange">
    </egrid>

    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryDataList" :queryData="dataQueryForm"
                     @on-query="queryCallBackFn">
      </pc-pagination>
    </div>

    <!--历史记录页面-->
    <pc-dialog :is-show="isShowHistoryDialog" title='历史记录' @on-close="isShowHistoryDialog = false">
      <div>
        <history></history>
      </div>
    </pc-dialog>

    <!--管理权限页面-->
    <!--<pc-dialog :is-show="isShowPermissionDialog" title='选择用户可使用的权限' @on-close="isShowPermissionDialog = false">-->
      <!--<div>-->
        <!--<permission :user="userInfo" @sure="afterUpdatePermission()" @close="isShowPermissionDialog = false">-->
        <!--</permission>-->
      <!--</div>-->
    <!--</pc-dialog>-->
    <pc-dialog-center :is-show="isShowPermissionDialog" title='选择用户可使用的权限' @on-close="isShowPermissionDialog = false">
      <div>
        <permission :user="userInfo" @sure="afterUpdatePermission()" @close="isShowPermissionDialog = false">
        </permission>
      </div>
    </pc-dialog-center>
  </div>
</template>

<script type="text/ecmascript-6">
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import PcDialog from 'components/dialog';
  import PcDialogCenter from 'components/dialog/center';
  import EgridCellView from 'components/wms/comm/EgridCellView.vue';
  import History from './history.vue';
  import Permission from './permission.vue';

  let that;

  // 操作按钮
  var Btn = {
    template: `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button type="danger" plain @click="editPermission(row)">管理权限</el-button>
      </div>`,
    props: ['row'],
    computed: {
    },
    methods: {
      // 管理权限
      editPermission (val) {
        this.$emit('edit-permission', val, true);
      }
    }
  };

  export default {
    data() {
      return {
        dataQueryForm: {
          userNo: null,
          contactName: null,
          contactMobileNo: null,
          companyName: null
        },
        tableData: [],
        userInfo: null,
        isShowHistoryDialog: false,
        isShowPermissionDialog: false,
        columns: [
          {
            label: '用户编号',
            prop: 'userNo'
          },
          {
            label: '用户昵称',
            prop: 'wxNickName'
          },
          {
            label: '用户姓名',
            prop: 'contactName'
          },
          {
            label: '手机号码',
            prop: 'contactMobileNo'
          },
          {
            label: '公司',
            prop: 'companyName'
          },
          {
            label: '权限',
            prop: 'moduleName'
          },
          {
            label: '操作',
            minWidth: 192,
            fixed: 'right',
            component: Btn, // 'el-button'
            listeners: {
              'edit-permission' (data) {
                that.editPermission(data);
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          }
        ],
        columnsSchema: {
          '公司': {minWidth: 200},
          '权限': {minWidth: 300}
        },
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 140,
          showOverflowTooltip: true,
          component: EgridCellView
        },
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        pageUrl: {
          queryDataList: '/ibs/web/module/queryListWithPage'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog, History, Permission, PcDialogCenter
    },
    created() {
      that = this;
    },

    methods: {
      getDate() {
        if (this.dataQueryForm.statisticDate === null) {
          this.dataQueryForm.startDate = '';
          this.dataQueryForm.startDate = '';
        } else {
          this.dataQueryForm.startDate = this.dataQueryForm.statisticDate[0];
          this.dataQueryForm.endDate = this.dataQueryForm.statisticDate[1];
        }
      },
      // 表头样式
      getHeaderStyle({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      openMessage() {
        this.$notify.info({
          title: '自定义位置',
          message: '右下角弹出的消息',
          position: 'bottom-right'
        });
      },
      queryCallBackFn(res) {
        this.tableData = res.result.list;
      },
      afterUpdatePermission() {
        this.isShowPermissionDialog = false;
        let that = this;
        // 0.5秒延迟后请求最新数据(不加的话，不是每一次都成功请求到最新数据)
        setTimeout(function() {
          that.$refs.pcPagination.queryListWithPageFn(false);
        }, 500);
      },
      queryDataFn() {
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      refresh(formName) {
        // this.$refs[formName].resetFields();
        this.dataQueryForm.userNo = null;
        this.dataQueryForm.contactName = null;
        this.dataQueryForm.contactMobileNo = null;
        this.dataQueryForm.companyName = null;
        this.queryDataFn();
      },
      selectionChange (rows) {
        console.log('selected', rows);
      },
      viewhistoryFn () {
        this.isShowHistoryDialog = true;
      },
      editPermission (scopeRow) {
        this.userInfo = scopeRow;
        this.isShowPermissionDialog = true;
      }
    }
  };
</script>
<style>
  .page-scan-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 146px;
    height: 146px;
    display: block;
    position: relative;
  }

  .page-scan-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail:before {
    content: "\E614";
    position: absolute;
    top: 18px;
    left: 40px;
    color: #b3b3b3;
    font-size: 60px;
    font-family: "maliiconfont" !important;
  }

  .page-scan-mana .topClassEditInfo .el-upload-list--picture-card .el-upload-list__item .el-icon-close {
    display: none;
  }

  .page-scan-mana .topClassEditInfo .el-upload-list--picture-card .el-upload-list__item .el-icon-close-tip {
    display: none;
  }
</style>
